<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui" template="template/tplmain.xhtml">
    <ui:define name="contenido">
        <h:form id="frmusuario">
            <p:fieldset legend="Opciones de busqueda" toggleable="true" toggleSpeed="500" style="text-align: left">  
                <table align="center" cellspacing="0" cellpadding="0" border="0">
                    <tr>
                        <td style="width: 100px;">
                            Nombre de usuario
                        </td>
                        <td style="width: 10px;">:</td>
                        <td style="width: 260px;">
                            <p:inputText styleClass="input_text_filtro" style="width: 240px;" id="txtuser" maxlength="60" value="#{mbgusuario.usuarioUsuario}" />
                            <p:tooltip value="Ingrese el nombre de usuario a buscar" showEvent="focus"  hideEvent="blur" for="txtuser"/>
                        </td>
                        <td style="width: 100px;">
                            Nombre y apellidos
                        </td>
                        <td style="width: 10px;">:</td>
                        <td style="width: 260px;">
                            <p:inputText styleClass="input_text_filtro" style="width: 240px;" id="txtnombre" maxlength="60" value="#{mbgusuario.nombreUsuario}" />
                            <p:tooltip value="Ingrese el nombre completo a buscar" showEvent="focus"  hideEvent="blur" for="txtnombre"/>
                        </td>
                        <td></td>

                    </tr>
                    <tr>
                        <td style="width: 100px;">
                            Perfil
                        </td>
                        <td style="width: 10px;">:</td>
                        <td style="width: 260px;">
                            <p:selectOneMenu value="-1" binding="#{mbgusuario.lstPerfil}" styleClass="input_text_filtro" style="width: 150px;" id="lstperfil">
                                <f:selectItems value="#{mbgusuario.listPerfil}" />
                            </p:selectOneMenu>
                            <p:tooltip value="Seleccione el perfil a buscar" showEvent="focus"  hideEvent="blur" for="lstperfil"/>
                        </td>
                        <td style="width: 100px;">
                            Estado
                        </td>
                        <td style="width: 10px;">:</td>
                        <td style="width: 120px;">
                            <p:selectOneMenu value="-1" styleClass="input_text_filtro" binding="#{mbgusuario.estadoUsuario}" style="width: 100px;" id="lstestado">
                                <f:selectItem itemLabel="-- Todos --" itemValue="-1" />
                                <f:selectItem itemLabel="Habilitado" itemValue="1" />
                                <f:selectItem itemLabel="Deshabilitado" itemValue="0" />
                            </p:selectOneMenu>
                        </td>
                        <td>
                            <p:commandButton value="Buscar perfiles" actionListener="#{mbgusuario.buscar}" id="btnbperfiles"   
                                             update="fsperfiles, tblPerfiles" image="ui-icon-search" />
                        </td>
                    </tr>
                </table>
            </p:fieldset> 
            <p:fieldset legend="Usuarios" toggleable="false" toggleSpeed="500" id="fsperfiles" style="text-align: left;">  
                <p:growl id="msg" showDetail="true" />
                <table cellspacing="0" cellpadding="0" border="0" width="100%">
                    <tr>
                        <td align="right">
                            <p:commandButton value="Nuevo usuario" id="btnnperfil"   
                                             image="ui-icon-plusthick" style="text-align: right;" 
                                             actionListener="#{mbgusuario.nuevoUsuario}"
                                             update=":frmdlg:pnlUsuario"
                                             ajax="true"
                                             oncomplete="nvUsuario.show()"/>
                        </td>
                    </tr>
                </table>
                <p:contextMenu for="tblPerfiles" id="ctm">  
                    <p:menuitem value="Visualizar" update="dialog" icon="ui-icon-search" oncomplete="usuarioDetalle.show()"/>   
                    <p:menuitem value="Editar" update=":dlgnUsuario" actionListener="#{mbperfil.editarPerfil}" icon="ui-icon-pencil" oncomplete="nvUsuario.show()"/>
                    <p:menuitem value="Eliminar" update=":frmEliminarUsuario:dlgEliminarPerfil" icon="ui-icon-minusthick" oncomplete="dlgEliminarPerfil.show()"/>
                </p:contextMenu>
                <p:dataTable id="tblPerfiles" var="usr" value="#{mbgusuario.listUsuario}" rowKey="#{usr.idusuario}" 
                             selection="#{mbgusuario.userSelected}" selectionMode="single" emptyMessage="Sin usuarios a mostrar" >  
                    <p:column headerText="Nombre y apellidos" style="width:30%">  
                        #{usr.nombreUsuario} #{usr.apellidosUsuario}
                    </p:column>  
                    <p:column headerText="Perfil" style="width:30%">  
                        #{usr.idperfil.nombreperfil}
                    </p:column>
                    <p:column headerText="Usuario" style="width:20%">  
                        #{usr.usuarioUsuario}
                    </p:column>
                    <p:column headerText="Estado" style="width:20%">  
                        #{usr.estadoUsuario == 0 ? 'Deshabilitado': 'Habilitado'}  
                    </p:column>
                </p:dataTable>
            </p:fieldset>

            <p:dialog header="Consulta de usuario" widgetVar="usuarioDetalle" resizable="false"  
                      width="250" showEffect="clip" hideEffect="fold" id="dialog" modal="true" style="text-align: left">  
                <h:panelGrid id="display" columns="2" cellspacing="4">
                    <h:outputText value="Usuario" />
                    <h:outputText value=": #{mbgusuario.userSelected.usuarioUsuario}" style="font-weight:bold" />
                    <h:outputText value="Nombre" />
                    <h:outputText value=": #{mbgusuario.userSelected.nombreUsuario}" style="font-weight:bold" />
                    <h:outputText value="Apellidos" />
                    <h:outputText value=": #{mbgusuario.userSelected.apellidosUsuario}" style="font-weight:bold" />
                    <h:outputText value="Perfil" />
                    <h:outputText value=": #{mbgusuario.userSelected.idperfil.nombreperfil}" style="font-weight:bold" />
                    <h:outputText value="Estado" />
                    <h:outputText value=": #{usr.estadoUsuario == 0 ? 'Deshabilitado': 'Habilitado'}" style="font-weight:bold" />
                </h:panelGrid>
            </p:dialog>
        </h:form>

        <p:dialog header="Nuevo usuario" widgetVar="nvUsuario" resizable="false"  
                  width="290" showEffect="clip" hideEffect="fold" id="dlgnUsuario" modal="true" 
                  style="text-align: left;">
            <h:form id="frmdlg">
                <h:panelGrid columns="1" style="margin-bottom:10px" id="pnlUsuario">
                    <f:facet name="header">
                        <p:messages showSummary="false" showDetail="true" autoUpdate="true" id="msgNusuario"></p:messages>
                    </f:facet>
                    <h:outputLabel for="txtUsuario" value="Usuario" />  
                    <p:inputText id="txtUsuario" value="#{mbgusuario.userSelected.usuarioUsuario}" 
                                 style="width: 250px;" label="Usuario"
                                 required="true" requiredMessage="Debe ingresar un nombre de usuario"> 
                        <f:validateLength minimum="2" maximum="25" for="txtUsuario"  />
                    </p:inputText>

                    <h:outputLabel for="txtPassword" value="Contraseña" />  
                    <p:password id="txtPassword" value="#{mbgusuario.userSelected.claveUsuario}" style="width: 250px;"
                                required="true" requiredMessage="Debe ingresar una contraseña" 
                                feedback="true" inline="true" promptLabel="Contraseña insegura" 
                                weakLabel="Contraseña media" goodLabel="Contraseña segura" 
                                strongLabel="Contraseña super segura" label="Contraseña"> 
                        <f:validateLength minimum="2" maximum="25" for="txtPassword"/>
                    </p:password>
                    <p:selectOneButton value="#{mbgusuario.userSelected.estadoUsuario}" required="true" 
                                       requiredMessage="El usuario esta habilitado o deshabilitado" label="Estado">  
                        <f:selectItem itemLabel="Habilitado" itemValue="1" />  
                        <f:selectItem itemLabel="Deshabilitado" itemValue="0" />  
                    </p:selectOneButton>
                    <p:separator />
                    <h:outputLabel for="txtNombreUsuario" value="Nombres" />  
                    <p:inputText id="txtNombreUsuario" value="#{mbgusuario.userSelected.nombreUsuario}" 
                                 style="width: 250px;" label="Nombre"
                                 required="true" requiredMessage="Debe ingresar el nombre del usuario"> 
                        <f:validateLength minimum="2" maximum="25" for="txtNombreUsuario"/>
                    </p:inputText>
                    <h:outputLabel for="txtApellidosUsuario" value="Apellidos" />  
                    <p:inputText id="txtApellidosUsuario" value="#{mbgusuario.userSelected.apellidosUsuario}" 
                                 style="width: 250px;" label="Nombre"
                                 required="true" requiredMessage="Debe ingresar los apellidos del usuario"> 
                        <f:validateLength minimum="2" maximum="25" for="txtApellidosUsuario"/>
                    </p:inputText>
                    <h:outputLabel for="lstNPerfil" value="Perfil" />  
                    <p:selectOneMenu binding="#{mbgusuario.lstNPerfil}" styleClass="input_text_filtro" style="width: 250px;" id="lstNPerfil">
                        <f:selectItems value="#{mbgusuario.listPerfil}" />
                    </p:selectOneMenu>
                    <f:facet name="footer">  
                        <p:commandButton id="btnAceptar" value="Aceptar" image="ui-icon-check" 
                                         update=":frmusuario:fsperfiles"   
                                         process=":frmdlg:pnlUsuario"
                                         onerror="nvUsuario.show()"
                                         actionListener="#{mbgusuario.guardarUsuario}" ajax="true"
                                         oncomplete="nvUsuario.hide()"/>  
                    </f:facet> 
                </h:panelGrid>
            </h:form>
        </p:dialog>
        <h:form id="frmEliminarUsuario">
            <p:confirmDialog widgetVar="dlgEliminarPerfil" header="Confirmación" severity="alert" id="dlgEliminarPerfil" message="¿Desea eliminar el perfil '#{mbperfil.perfilSelected.nombreperfil}'?">
                <p:commandButton id="confirm" image="ui-icon-minusthick" value="Eliminar" update=":frmusuario:fsperfiles" oncomplete="dlgEliminarPerfil.hide()"  
                                 actionListener="#{mbperfil.eliminarPerfil}" ajax="true" />
                <p:commandButton id="decline" image="ui-icon-circle-close" value="Cancelar" onclick="dlgEliminarPerfil.hide()"/>
            </p:confirmDialog>
        </h:form>
    </ui:define>

</ui:composition>
